<template>
  <div class="header-right">
    <div class="left">
      <span>
        当班人员：
        <span v-for="(u, i) in userDutys" :key="i">
          {{ u.realname }}（<span :class="{ error: u.takeHour >= u.tiredHour }"
            >连续当班{{ u.takeHour }}H</span
          >）
        </span>
      </span>
    </div>
    <div class="right">
      <el-cascader
        v-model="current"
        :options="list"
        :show-all-levels="false"
        @change="handleChange"
      ></el-cascader>
      <el-date-picker
        v-model="produceDate"
        type="date"
        placeholder="选择日期"
        class="current-date"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        :clearable="false"
        @change="handleChangeDate"
      >
      </el-date-picker>
      <el-select
        v-model="currentGroup"
        placeholder=""
        @change="handleChangeGroup"
      >
        <el-option
          v-for="item in groupOptions"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import { listAllFactorys } from "@/api/factory";
import { findTreeNode } from "@/utils/tree";
import { getNowTimeProduceDate } from "@/api/dashboard/blowIrriagtionSpinLineDaily";
import { getUserDutyInfo } from "@/api/dashboard/injectionWorkshop";
export default {
  props: {
    refreshKey: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      list: [],
      current: [],
      produceDate: null,
      currentGroup: null,
      groupOptions: [],
    };
  },
  computed: {
    userDutys() {
      const item = this.groupOptions.find(
        (ele) => ele.name == this.currentGroup
      );
      return item?.value || [];
    },
  },
  created() {
    this.getListAllFactorys();
  },
  methods: {
    // 查询车间列表
    getListAllFactorys() {
      Promise.all([
        listAllFactorys(),
        getNowTimeProduceDate({
          nowTime: this.parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"),
        }),
      ]).then(([res1, res2]) => {
        if (res1?.data) {
          res1.data.forEach((factory) => {
            let item1 = {
              value: factory.factoryDeptCode,
              label: factory.factoryName,
              children: [],
            };
            factory.workshopVos?.forEach((workshop) => {
              //注胚车间可选
              if (workshop.workshopType == "INJECTION") {
                let item2 = {
                  value: workshop.workshopId,
                  label: workshop.workshopName,
                  properties: { ...workshop },
                };
                item1.children.push(item2);
              }
            });
            this.list.push(item1);
          });

          // 默认选中
          this.current = ["CRB-AK1", "26"];
        }
        this.produceDate =
          res2?.data || this.parseTime(new Date(), "{y}-{m}-{d}");

        this.handleChange(this.current);
      });
    },
    // 查询值班情况
    async getUserDutyInfoData(isInit = true) {
      if (!this.current) {
        return;
      }
      try {
        const res = await getUserDutyInfo({
          workshopId: this.current[1],
          produceDate: this.produceDate,
        });

        this.groupOptions = res.data;
      } catch (error) {
        this.groupOptions = [];
      }

      if (!isInit) {
        return;
      }
      if (this.groupOptions.length) {
        // 默认选中第一个
        this.currentGroup = this.groupOptions[0].name;
      } else {
        this.currentGroup = "";
      }
    },
    async handleChange(value) {
      await this.getUserDutyInfoData(true);

      this.handleEmit();
    },
    async handleChangeDate(value) {
      await this.getUserDutyInfoData(true);

      this.handleEmit();
    },
    async handleChangeGroup(value) {
      this.handleEmit();
    },
    handleEmit() {
      const workshopItem = findTreeNode(this.list, (node) => {
        return node.value == this.current[1];
      });

      const _group = this.groupOptions.find(
        (ele) => ele.name == this.currentGroup
      );
      let groupItem = null;
      if (_group?.value?.length) {
        const {
          classesEndTime,
          classesId,
          classesName,
          classesStartTime,
          erpWorkGroupDesc,
          groupId,
          hondoverTime,
          takeoverTime,
        } = _group.value[0];
        groupItem = {
          classesEndTime,
          classesId,
          classesName,
          classesStartTime,
          erpWorkGroupDesc,
          groupId,
          hondoverTime,
          takeoverTime,
        };
      }

      this.$emit("change", {
        workshopItem,
        produceDate: this.produceDate,
        groupItem,
      });
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getUserDutyInfoData(false);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.header-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
}
.right {
  display: flex;
  align-items: center;
  gap: 10px;
  .el-select:last-child {
    ::v-deep .el-input__inner {
      width: 100px;
    }
  }
}
.error {
  color: #f54e1e;
}
::v-deep .el-input.el-input--suffix {
  // 2.修改背景颜色、字体颜色、边框、宽高
  .el-input__inner {
    background: #010d50 !important;
    // border: 1px solid #010d50;
    border: 1px solid #fff;
    color: #fff;
    height: 30px;
    width: 160px;
  }

  // 符号的位置会错乱，进行修正（水平）
  .el-input__suffix-inner {
    position: absolute;
    left: -25px;
  }

  // 符号的位置会错乱，进行修正（垂直）
  .el-select__caret.el-input__icon.el-icon-arrow-up {
    line-height: 30px;
  }

  .el-input__inner::placeholder {
    color: #fff;
  }

  .el-icon-arrow-up:before {
    color: #fff;
  }
}

::v-deep {
  .el-cascader--medium {
    font-size: 14px;
    line-height: 36px;
  }
  .el-input--medium {
    font-size: 14px;
  }
  .el-input--medium .el-input__inner {
    line-height: 36px;
    padding-right: 30px;
  }
  .el-input__suffix {
    right: 5px;
  }
  .el-input--medium .el-input__icon {
    line-height: 30px;
  }
  .el-cascader .el-input .el-icon-arrow-down {
    font-size: 14px;
  }
  .el-date-editor.el-input {
    width: auto;
  }
}
</style>
